<!DOCTYPE html>
<html>
<head>
    <title>消息中心</title>
    <#include "../../include/head-file.ftl">
</head>
<body>
<div id="index" v-cloak class="ms-index">
    <div class="ms-search" style="padding: 20px 10px 20px 10px;">
        <el-row>
            <el-form :model="form" ref="searchForm" label-width="90px" size="mini">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="名称：" prop="fileName">
                            <el-input v-model="form.fileName"
                                      :disabled="false"
                                      :style="{width:  '100%'}"
                                      :clearable="true"
                                      placeholder="请输入">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="操作者：" prop="operateName">
                            <el-input v-model="form.operateName"
                                      :disabled="false"
                                      :style="{width:  '100%'}"
                                      :clearable="true"
                                      placeholder="请输入">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="消息类型：" prop="messageType">
                            <#--<el-input v-model="form.messageType"-->
                                      <#--:disabled="false"-->
                                      <#--:style="{width:  '100%'}"-->
                                      <#--:clearable="true"-->
                                      <#--placeholder="请输入">-->
                            <#--</el-input>-->
                            <el-select v-model="form.messageType"
                                       :style="{width: '100%'}"
                                       :filterable="false"
                                       :disabled="false"
                                       placeholder="请选择消息类型">
                                <el-option v-for='item in messageTypeOptions' :key="item.type"
                                           :value="item.type"
                                           :label="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" style="text-align:center;">
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="pageNo=1;list()">查询
                        </el-button>
                        <el-button @click="rest" icon="el-icon-refresh" size="mini">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-row>
    </div>
    <el-main class="ms-container">
        <el-table ref="multipleTable" height="calc(100vh-68px)" class="ms-table-pagination" border :data="treeList"
                  tooltip-effect="dark">
            <template slot="empty">
                {{emptyText}}
            </template>
            <el-table-column label="名称" align="center" prop="fileName">
            </el-table-column>
            <el-table-column label="消息内容" align="center" prop="messageContent">
            </el-table-column>
            <el-table-column label="消息类型" align="center" prop="messageType">
            </el-table-column>
            <el-table-column label="操作者"  align="center" prop="operateName">
            </el-table-column>
            <el-table-column label="接收时间" align="center" prop="receivedDate">
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :current-page="pageNo"
                :page-size="pageSize"
                :total="total"
                class="ms-pagination"
                @current-change='currentChange'>
        </el-pagination>
    </el-main>
</div>
</body>

</html>
<script>
    var indexVue = new Vue({
        el: '#index',
        data: {
            treeList: [],
            emptyText: '',
            total: 0,
            //总记录数量
            pageSize: 10,
            //页面数量
            pageNo: 1,
            //初始页
            mananger: ms.manager,
            //搜索表单
            form: {
                // 名称
                fileName: '',
                // 昵称
                operateName: '',
                // 消息类型
                messageType: ''
            },
            messageTypeOptions:[
                {type:"",name:"全部"},
                {type:"发布申请",name:"发布申请"},
                {type:"共享通知",name:"共享通知"}
            ]
        },
        methods: {
            //查询列表
            list: function () {
                var that = this;
                var page = {
                    pageNo: that.pageNo,
                    pageSize: that.pageSize
                };
                var form = JSON.parse(JSON.stringify(that.form));


                history.replaceState({
                    form: form,
                    page: page,
                    total: that.total
                }, "");

                setTimeout(function () {
                    ms.http.post(ms.manager + "/message-center/list.do",Object.assign({}, that.form, page),{
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    })
                        .then(function (data) {
                            if(data.result){
                                if (data.data.total <= 0) {
                                    that.emptyText = '暂无数据';
                                    that.treeList = [];
                                } else {
                                    that.emptyText = '';
                                    that.total = data.data.total;
                                    that.treeList = data.data.records;
                                }
                            }
                    }).catch(function (err) {
                        console.log(err);
                    });
                }, 500);
            },
            //pageNo改变时会触发
            currentChange: function (pageNo) {
                console.log("11分页"+pageNo)
                this.pageNo = pageNo;
                this.list();
            },
            //重置表单
            rest: function () {
                this.$refs.searchForm.resetFields();
                this.list();
            }
        },
        mounted: function () {
            if (history.hasOwnProperty("state") && history.state) {
                this.form = history.state.form;
                this.total = history.state.total;
                this.pageNo = history.state.page.pageNo;
                this.pageSize = history.state.page.pageSize;
            }

            this.list();
        }
    });
</script>
<style>
    #index .ms-search {
        padding: 20px 0;
    }
</style>
